<template>
	<view>
		<view class="content">
			<view class="introduce-section" style="padding-top:40px;">
				<view class="margin-top-lg"></view>
				<text class="title">{{ info.title }}</text>
				<view class="introduce">
					<view class="auther">
						<image :src="weburl+info.photo"></image>
						<text>{{ info.author_name }}</text>
						<text class="cu-right">{{ info.time }}</text>
					</view>
					<view class="times" style="display: none;">
						<view class="text-right">
							<button class="cu-btn sm bg-red paddin-lr margin-lr-sm" @click="dofollow">关注</button>
						</view>
						<view class="text-right"></view>
					</view>
				</view>
				<u-parse :content="info.content" @preview="preview" @navigate="navigate"></u-parse>
			</view>
		</view>
		<view class="container new-comment" style="display: none;">
			<view class="s-header">
				<text class="tit">相关推荐</text>
			</view>
			<view class="rec-section">
				<view class="news-list">
					<view v-for="(item, index) in list" :key="index" class="news-item" @click="navToDetails(item)">
						<text :class="['title', 'title'+item.show_type]">{{item.title}}</text>
						<view v-if="item.images.length > 0" :class="['img-list', 'img-list'+item.show_type, item.images.length > 1 && item.show_type==='single' ? 'img-list-single': '']">
							<view 
								v-for="(imgItem, imgIndex) in item.images" :key="imgIndex"
								:class="['img-wrapper', 'img-wrapper'+item.show_type, item.images.length > 1 && item.show_type==='single' ? 'img-wrapper-single': '']"
							>
								<image class="img" :src="weburl+imgItem"></image>
								<view class="video-tip" v-if="item.videoSrc">
									<image class="video-tip-icon" src=""></image>
								</view>
							</view>
						</view>
						<!-- 空图片占位 -->
						<view v-else class="img-empty"></view>
						<view :class="['bot', 'bot'+item.show_type]">
							<text class="author">{{item.author_name}}</text>
							<text class="time">{{item.time}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="s-header" style="display: none;">
				<text class="tit">最新评论</text>
			</view>
			<view class="evalution"></view>
		</view>
		<!-- <view class="bottom">
			<view class="gotoBack cuIcon-back" @click="gotoBack"></view>
			<view data-target="bottomModal" class="input-box" @click="navToTask()">
				<view class="cu-progress round bg-gradual-orange">
					<view class="cu-tips text-sm">{{ timeTip }}</view>
					<view class="bg-red" style="width: 0px;"></view>
				</view>
			</view>
			<view class="padding-lr-sm cuIcon-favorfill text-red" v-if="isFavs" @click="dofav"></view>
			<view class="padding-lr-sm cuIcon-favor" v-else  @click="dofav"></view>
			
			<view class="padding-lr-sm cuIcon-appreciatefill text-red" v-if="isLikes" @click="dolike"></view>
			<view class="padding-lr-sm cuIcon-appreciate" v-else  @click="dolike"></view>
			
			<view data-target="bottomModal" class="padding-lr-sm cuIcon-messagefill text-red" v-if="isReview" @click="doreview"  style="display: none;"></view>
			<view data-target="bottomModal" class="padding-lr-sm cuIcon-message" v-else  @click="doreview"  style="display: none;"></view>
		</view> -->
		<view style="visibility: hidden;">
			<view class="cu-modal bottom-modal show">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-blue">取消</view>
						<view class="action text-green">发布</view>
					</view>
					<view class="padding-xs">
						<textarea class="text-left padding-sm" placeholder="优质评论将被优先展示"></textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue';
	
    export default {
		components: {
		    uParse
		},
        data() {
            return {
				news_id:0,
				is_login:false,
				info: [],
				list:[],
				modalName: null,
				commentValue: "",
				isFavs: !1,
				isFollow: !1,
				isShare: !1,
				isReview: !1,
				isLikes: !1,
				timeLen: 60,
				secondTime: 60,
				timePercentage: 0,
				timeSecond: 0,
				timeTip: "",
				task_name: "",
				task_times: 0,
				modalTask: null
            }
        },
		onUnload(){
			// 页面关闭移除计时器，否则app平台有BUG
			clearInterval(this.cTime);
		},
		onLoad: function (option) {
			this.news_id = option.news_id;
			let info = uni.getStorageSync("userinfo");
			if (info.username == '' || typeof(info.username) == 'undefined' || info.token == '' || typeof(info.token) ==
				'undefined') {
				this.is_login = false;
			}else{
				this.is_login = true;
				// this.downTime();
			}
			this.getData();
		},
		methods: {
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				let id = this.news_id;
				let timestamp = this.helper.now();
				var info = uni.getStorageSync("userinfo");
				let sign = this.helper.setSign(['id='+id,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getNewsDetail",
					timestamp:timestamp,
					data:{id:id,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					console.log("资讯详情",res.data);
					this.info = res.data.data.info;
					this.list = res.data.data.list;
					uni.setNavigationBarTitle({
						title: this.info.title
					});
					this.timeTip = "我来说两句";
					this.task_name = this.info.task_name;
					this.task_times = parseInt(this.info.task_times);
			
					if (this.is_login) {
						this.isFavs = "0" != this.info.favs;
						// this.isShare = "0" != this.info.shares;
						// this.isFollow = "0" != this.info.follows;
						this.isLikes = "0" != this.info.likes;
						this.isReview = "0" != this.info.reviews;
						if(this.task_times > 0){
							this.secondTime = this.task_times;
							this.timeSecond = 0;
							this.timeLen = this.task_times;
							this.timePercentage = "0%";
							this.timeTip = "阅读" + this.secondTime + "秒后获奖励";
							this.countDown();
						}else{
							clearInterval(this.interval);
						}
					} 
					else {
						clearInterval(this.interval);
					}
					uni.hideLoading();
				})
			},
			gotoBack:function(){
				uni.navigateBack();
			},
			dofollow:function(){
				if(this.is_login == false){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url:"../login/login"
								})
							}
						}
					});
					return;
				}
			},
			dofav:function(){
				if(this.is_login == false){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url:"../login/login"
								})
							}
						}
					});
					return;
				}
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['news_id='+this.news_id,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"dofav",
					timestamp:timestamp,
					data:{news_id:this.news_id,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.hideLoading();
					this.isFavs = !this.isFavs;
					if(this.isFavs){
						uni.showToast({
							title: "收藏成功",
							icon: "success"
						})
					}else{
						uni.showToast({
							title: "取消收藏",
							icon: "success"
						})
					}
				})
			},
			//新闻详情
			navToDetails(item){
				uni.navigateTo({
					url: `/pages/news/detail?news_id=${item.id}`
				})
			},
			dolike:function(){
				if(this.is_login == false){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url:"../login/login"
								})
							}
						}
					});
					return;
				}
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['news_id='+this.news_id,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"dolike",
					timestamp:timestamp,
					data:{news_id:this.news_id,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.hideLoading();

					this.isLikes = !this.isLikes;
					if(this.isLikes){
						uni.showToast({
							title: "点赞成功",
							icon: "success"
						})
					}else{
						uni.showToast({
							title: "取消点赞",
							icon: "success"
						})
					}
				})
			},
			doreview:function(){
				if(this.is_login == false){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url:"../login/login"
								})
							}
						}
					});
					return;
				}
				
				this.modalName = 'cuPopup';
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				// var info = uni.getStorageSync("userinfo");
				// let timestamp = this.helper.now();
				// let sign = this.helper.setSign(['news_id='+this.news_id,'token='+info.token,'timestamp='+timestamp]);
				// this.helper.req({
				// 	api:"doreview",
				// 	timestamp:timestamp,
				// 	data:{news_id:this.news_id,token:info.token},
				// 	header:{sign:sign},
				// 	method:'POST',
				// }).then(res=>{
				// 	uni.hideLoading();
				// 	uni.showToast({
				// 		title: "评论成功",
				// 		icon: "success"
				// 	})
				// })
			},
			// showModal: function(t) {
			// 	this.modalName = t.currentTarget.dataset.target,
			// 	this.$refs.cuPopup.visible = !1,
			// 	this.$refs.cuPopup.setModalName(this.modalName)
			// },
			// hideModal: function(t) {
			// 	this.$refs.cuPopup.visible = !0,
			// 	this.$refs.cuPopup.setModalName(null)
			// },
			// reviewPost: function(t) {
			// 	if ("" != t) {
			// 		uni.showLoading({
			// 			title:"数据加载中",
			// 			mask:true
			// 		})
			// 		var info = uni.getStorageSync("userinfo");
			// 		let timestamp = this.helper.now();
			// 		let sign = this.helper.setSign(['content='+t,'news_id='+this.news_id,'token='+info.token,'timestamp='+timestamp]);
			// 		this.helper.req({
			// 			api:"doreview",
			// 			timestamp:timestamp,
			// 			data:{content:t,news_id:this.news_id,token:info.token},
			// 			header:{sign:sign},
			// 			method:'POST',
			// 		}).then(res=>{
			// 			uni.hideLoading();
			// 			this.isReview = !0;
			// 			uni.showToast({
			// 				title: "你的评论提交成功，审核通过后即可显示了",
			// 				icon: "success"
			// 			})
			// 		})
			// 	}
			// },
			countDown: function() {
				var that = this;
				clearInterval(this.interval),
				this.interval = null,
				this.interval = setInterval((function() {
					that.secondTime -- ;
					that.timeSecond ++ ;
					that.timePercentage = parseInt(that.timeSecond / that.timeLen * 100) + "%";
					that.timeTip = "阅读" + that.secondTime + "秒后获奖励";
					if (that.secondTime <= 0) {
						that.secondTime = that.timeLen;
						that.timeSecond = 0;
						that.timeTip = "任务已完成";
						clearInterval(that.interval);
						that.modalTask = null;
						that.doRead(that.task_name);
					}
				}), 1000)
			},
			doRead: function(type) {
				//获取基础参数
				uni.showLoading({
					title:"数据加载中",
					mask:true
				})
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type='+type,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"doReadTask",
					timestamp:timestamp,
					data:{type:type,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.hideLoading();
					uni.showToast({
						title: "阅读任务完成",
						icon: "success"
					})
				})
			},
			preview(src, e) {
			  // do something
			},
			navigate(href, e) {
			  // do something
			},
		},
    }
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
	}
</style>
